<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      
    </div>

    <script src="../js/vue.js"></script>

    <script>
      const LKBOX = {
        props:['num1', 'num2', 'num3'],
        template:`
        <div >数据1:{{num1}}</div>
        <div >数据2:{{num2}}</div>
        <div >数据3:{{num3}}</div>
        `
      };
      const app = Vue.createApp({
        data() {
          return {
            a:100,
            b:200,
            c:300,
            numObj:{
              num1:100,
              num2:200,
              num3:300
            }
          }
        },
        components:{
          'lk-box':LKBOX
        },
        // v-bind 简写 :
        template:`
          <lk-box :num1="a" :num2="b" :num3="c" ></lk-box>
          <hr>
          <lk-box :="numObj"></lk-box>
          <hr>
          <lk-box :num1="numObj.num1" :num2="numObj.num2" :num3="numObj.num3"></lk-box>
        `
      }).mount("#app");
    </script>
  </body>
</html>